/**
 * 功能描述: 基础垂直时间线样式表
 * @author 崔孝楠
 * @date 2022/9/22 9:14
 * @version 1.0
 */
@import '../../style/index';
// 垂直时间线布局
@mixin vertical-timeline--layout {
  box-sizing: border-box;
  line-height: $line-height-base;
  margin: 0;
  padding: 0;
}
// 子元素布局
@mixin vertical-timeline-item--layout {
  position: relative;
  margin: 0;
  padding-bottom: 20px;
}
// 轨道布局
@mixin vertical-timeline-item-tail--layout {
  position: absolute;
  top: 10px;
  left: 4px;
  height: calc(100% - 10px);
}
// 节点布局
@mixin vertical-timeline-item-head--layout {
  position: absolute;
  width: 10px;
  height: 10px;
}
// 垂直时间线样式
@include b(vertical-timeline) {
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  font-feature-settings: 'tnum';
  list-style: none;
  @include vertical-timeline--layout;
}
// 子元素样式
@include b(vertical-timeline-item) {
  font-size: $font-size-base;
  list-style: none;
  @include vertical-timeline-item--layout;
}
// 轨道样式
@include b(vertical-timeline-item-tail) {
  border-left: 2px solid $border-color-lighter;
  @include vertical-timeline-item-tail--layout;
}
// 节点样式
@include b(vertical-timeline-item-head) {
  background-color: $color-white;
  border: 2px solid $color-primary;
  border-radius: 100px;
  color: $color-primary;
  @include vertical-timeline-item-head--layout;
}
// 时间线居左布局
@include b(vertical-timeline-item-content) {
  position: relative;
  top: -7.001px;
  margin: 0 0 0 26px;
  word-break: break-word;
}
// 最后一个子元素布局
@include b(vertical-timeline-item-last) {
  @include b(vertical-timeline-item-tail) {
    display: none;
  }
  // 文字
  @include b(vertical-timeline-item-content) {
    min-height: 48px;
  }
}

// 文字交替时布局
@include b(vertical-timeline-alternate) {
  .#{$namespace}-vertical-timeline-item-tail,
  .#{$namespace}-vertical-timeline-item-head {
    left: 50%;
  }
  // 节点
  @include b(vertical-timeline-item-head) {
    margin-left: -4px;
  }
  // 文字居右
  @include b(vertical-timeline-item-left) {
    @include b(vertical-timeline-item-content) {
      left: calc(50% - 4px);
      width: calc(50% - 14px);
      text-align: left;
    }
  }
  // 文字居左
  @include b(vertical-timeline-item-right) {
    @include b(vertical-timeline-item-content) {
      width: calc(50% - 14px);
      margin: 0;
      text-align: right;
    }
  }

}
// 时间线居右布局
@include b(vertical-timeline-right) {
  @include b(vertical-timeline-item-head) {
    left: calc(100% - 4px - 2px);

  }
  // 轨道
  @include b(vertical-timeline-item-tail) {
    left: calc(100% - 2px);
  }
  // 文字
  @include b(vertical-timeline-item-content) {
     width: calc(100% - 14px);
     margin: 0;
     text-align: right;
   }
}

